<template>
  <div id="app">
    <!-- 卡片区域 -->
    <div class="card">
      <div class="card-header">
        添加品牌
      </div>
      <div class="card-body">
        <!-- 行内的表单 -->
        <form class="form-inline">
          <div class="col-auto">
            <label class="sr-only" for="inlineFormInputGroup"></label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text" >品牌名称</div>
              </div>
              <input type="text" class="form-control" v-model.trim="name">
            </div>
          </div>
          <div class="col-auto">
            <label class="sr-only" for="inlineFormInputGroup"></label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text" >品牌价格</div>
              </div>
              <input type="number" class="form-control" v-model.number="jia">
            </div>
          </div>
          <button type="button" @click="add" class="btn btn-primary mb-2">添加</button>
        </form>
      </div>
    </div>

    <!-- 表格区域 -->
    <table class="table table-bordered mt-2">
      <thead>
        <tr>
          <th>#</th>
          <th>车辆名称</th>
          <th>车辆价格</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="list.length > 0">
        <tr v-for="(item,index) in list" :key="item.id">
          <td>{{index + 1 }}</td>
          <td>{{item.name}}</td>
          <td :class="item.jia >=30000 ? 'red':''">{{item.jia | name}}</td>
          <td>{{item.time | time}}</td>
          <td>
            <a href="#" @click="fn(item.id)">删除</a>
          </td>
        </tr>
        <tr class="footer">
          <td>统计</td>
          <td colspan="2">
            总价钱：{{num | name}}
          </td>
          <td colspan="2">
            平均价：{{num/list.length | name}}
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="5" class="text-center">没有更多数据</td>
        </tr>
      </tbody>
    </table>
    <div>
      
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [],
     name:'',
      jia:''
    }
  },
  methods: {
    fn(id) {
       this.list=this.list.filter(item => item.id !==id)
    },
    add() {
      if(!this.name || !this.jia) {
        return alert('输入内容')
      }
      this.list.unshift({
      id:Date.now(),
      name:this.name,
      jia:this.jia,
      time:new Date()
      })
      this.name=''
      this.jia=''
      
    }
  },
  computed: {
    num() {
      let arr=0
      this.list.forEach(item=> arr+=item.jia)
      return arr
    }
  },
  watch: {
    list: {
      deep:true,
      // immediate:true,
      handler(value) {
            localStorage.setItem('list',JSON.stringify(value))
      }
    }
  }
}
</script>

<style lang="less">
#app {
  width: 60%;
  margin: 50px auto;
  a {
    margin-right: 5px;
  }
  .footer {
    background-color: rgba(0, 0, 0, .05);
  }
  .red {
    color: red;
  }
}
</style>